<template>
    <header>
        <div class="header_content">
            <div class="header_content--title">
            </div>
            <div class="header_content--msg">
                <label>
                    <i class="el-icon-picture"></i>
                    <span>{{headData.userName}}</span>
                </label>
                <label>
                    <span class="quit" @click="quit">
                        <i class="el-icon-upload2"></i>
                    <span>退出</span>
                    </span>
                </label>

            </div>
        </div>
    </header>
</template>

<style scoped>
header {
    display: flex;
    box-shadow: 0 1px 2px #e4eaf3;
}

.header_content--msg {
    display: flex;
    font-size: 1rem;
    width: 20rem;
    text-indent: 1em;
    line-height: 60px;
     background: #eef1f6;     
    /* background: #627990;
    color: #fff; */
}
label {
    flex: 1;
}
.header_content {
    flex: 1;
    display: flex;
}

.header_content--title {
    flex: 1;
}

.quit {
    display: block;
    margin-right: 2rem;
}
.quit:hover {
    background: #e4eaf3;
}
</style>

<script>
export default {
    name: 'header',
    data() {
        return {

        };
    },
    props:['headData'],
    methods: {
        quit () {
            this.$emit('quit','quit')
        }
    }
}
</script>
